<template>
  <el-container>
    <el-header style="height: auto;">
      <el-input
        v-model="kwInput"
        style="float: right; width: 300px"
        placeholder="输入 任意字符 进行筛选"
        class="input-with-select"
        clearable
        @keyup.native.enter="handleGetData"
      >
        <el-button slot="append" icon="el-icon-search" @click="handleGetData">搜索</el-button>
      </el-input>
      <el-button type="primary" style="float: right" @click="innerDialogVisible=true">过滤</el-button>
    </el-header>
    <el-main>
      <el-table
        v-loading="loading"
        border
        stripe
        height="700"
        style="width: 100%;border:2px solid black;color:black"
        :data="data.filter(d => !search || d.keyword.toString().toLowerCase().includes(search.toLowerCase()))"
        show-summary
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          prop="keyword"
          label="关键词"
        >
          <template slot-scope="scope">
            <a :href="'https://www.google.com/search?tbm=shop&source=hp&q=' + scope.row.keyword" target="_blank">{{ scope.row.keyword }}</a>
          </template>
        </el-table-column>
        <el-table-column
          prop="cost"
          sortable
          label="花费"
          width="110"
        >
          <template slot-scope="scope">
            {{ scope.row.cost }}
          </template>
        </el-table-column>
        <el-table-column
          prop="cpc"
          sortable
          label="CPC"
          width="80"
        />
        <el-table-column
          prop="clicks"
          sortable
          label="点击量"
          width="90"
        />
        <el-table-column
          prop="display"
          sortable
          label="展示"
          width="80"
        />
        <el-table-column
          prop="ad"
          label="广告系列"
          width="200"
        >
          <template slot-scope="scope">
            {{ scope.row.ad }}<br>
            {{ scope.row.adgroup }}
          </template>
        </el-table-column>
        <el-table-column
          prop="match_type"
          label="匹配类型"
          width="100"
        />
        <el-table-column
          prop="add_remove"
          label="添加排除"
          width="80"
        />
        <el-table-column
          prop="googleadsreportconfig__note"
          label="报告"
        />
        <el-table-column
          prop="date_key"
          label="日期范围"
          width="200"
        />
        <el-table-column
          label="操作"
          width="100"
        >
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="data.length"
        background
        class="mt-pagination"
        :current-page="page"
        :page-sizes="[10,50,100,200,300,500]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />

      <el-dialog
        append-to-body
        title="过滤参数"
        :visible.sync="innerDialogVisible"
        :close-on-click-modal="false"
      >
        <el-row>
          <el-form :inline="true" :model="filter" class="demo-form-inline" size="mini">
            <el-row>
              <el-form-item label="最小花费">
                <el-input v-model="filter.min_cost" placeholder="过滤的最小花费" />
              </el-form-item>
              <el-form-item label="最多花费">
                <el-input v-model="filter.max_cost" placeholder="过滤的最大花费" />
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="最少点击">
                <el-input v-model="filter.min_click" placeholder="最少点击" />
              </el-form-item>
              <el-form-item label="最多点击">
                <el-input v-model="filter.max_click" placeholder="最多点击" />
              </el-form-item>

              <el-form-item label="最少展示">
                <el-input v-model="filter.min_display" placeholder="最少点击" />
              </el-form-item>
              <el-form-item label="最多展示">
                <el-input v-model="filter.max_display" placeholder="最多点击" />
              </el-form-item>
              <el-form-item label="汇率">
                <el-input v-model="filter.rate" placeholder="综合汇率" />
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="最小CPC">
                <el-input v-model="filter.min_cpc" placeholder="最小CPC" />
              </el-form-item>
              <el-form-item label="最高CPC">
                <el-input v-model="filter.max_cpc" placeholder="最高CPC" />
              </el-form-item>

              <el-form-item label="排序">
                <el-select v-model="filter.order_by" placeholder="选择默认排序">
                  <el-option label="广告费" value="cost" />
                  <el-option label="点击量" value="clicks" />
                  <el-option label="CPC" value="cpc" />
                  <el-option label="展示" value="display" />
                </el-select>
              </el-form-item>
              <el-form-item label="升序">
                <el-switch v-model="filter.order_desc" />
              </el-form-item>
            </el-row>
          </el-form>

        </el-row>
        <span slot="footer" class="dialog-footer">
          <el-button @click="innerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleGetData">确 定</el-button>
        </span>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
import { Get, Delete } from '@/api/orders/googlereportsearchterm'
import qs from 'qs'

export default {
  name: 'Googleadsreportsearchterm',
  data() {
    return {
      kwInput: '',
      dialogVisible: false,
      innerDialogVisible: false,
      page: 1,
      pagesize: 100,
      total: 0,
      search: '',
      multipleSelection: [],
      loading: false,
      data: [],
      currentRow: '',
      filter: {
        'check': 'loss',
        'rate': 7,
        'timerange': '',
        'order_desc': false,
        'process': false,
        'order_by': 'clicks',
        'min_cost': 0,
        'max_cost': 100000,
        'min_click': 0,
        'max_click': 0,
        'min_display': 0,
        'max_display': 0,
        'min_cpc': 0,
        'max_cpc': 0
      },
      title: '过去7天关键词'
    }
  },
  methods: {
    // pageSize 改变后触发 table 更新
    handleSizeChange(val) {
      this.handleGetData()
    },
    // page 改变后触发 table 更新
    handlePageChange(val) {
      this.page = val
      if (this.current_handle === 'handleGetAutoReportData') {
        this.handleGetAutoReportData()
      } else {
        this.handleGetData()
      }
    },
    handleSetFilter(action) {
      switch (action) {
        case 'normal':
          this.filter = {
            'check': 'loss',
            'cache_key': '',
            'max_roi': 0,
            'min_roi': 0,
            'min_amount': 0,
            'max_amount': 0,
            'rate': 7,
            'timerange': '',
            'order_desc': false,
            'process': false,
            'order_by': 'clicks',
            'min_cost': 0,
            'max_cost': 100000,
            'min_click': 0,
            'max_click': 0,
            'min_display': 0,
            'max_display': 0,
            'min_cpc': 0,
            'max_cpc': 0
          }
          this.handleGetData()
          break
        case 'loss':
          this.filter = {
            'check': 'loss',
            'cache_key': '',
            'max_roi': 2,
            'min_roi': 0,
            'min_amount': 0,
            'max_amount': 0,
            'rate': 7,
            'timerange': '',
            'order_desc': false,
            'process': false,
            'order_by': 'clicks',
            'min_cost': 14,
            'max_cost': 100000,
            'min_click': 50,
            'max_click': 0,
            'min_display': 0,
            'max_display': 0,
            'min_cpc': 0,
            'max_cpc': 0
          }
          this.handleGetData()
          break
        case 'highimpr':
          this.filter = {
            'check': 'loss',
            'cache_key': '',
            'max_roi': 2,
            'min_roi': 0,
            'min_amount': 0,
            'max_amount': 0,
            'rate': 7,
            'timerange': '',
            'order_desc': false,
            'process': false,
            'order_by': 'clicks',
            'min_cost': 0,
            'max_cost': 100000,
            'min_click': 0,
            'max_click': 0,
            'min_display': 1000,
            'max_display': 0,
            'min_cpc': 0,
            'max_cpc': 0
          }
          this.handleGetData()
          break
        case 'highclick':
          this.filter = {
            'check': 'loss',
            'cache_key': '',
            'max_roi': 2,
            'min_roi': 0,
            'min_amount': 0,
            'max_amount': 0,
            'rate': 7,
            'timerange': '',
            'order_desc': false,
            'process': false,
            'order_by': 'clicks',
            'min_cost': 0,
            'max_cost': 100000,
            'min_click': 20,
            'max_click': 0,
            'min_display': 0,
            'max_display': 0,
            'min_cpc': 0,
            'max_cpc': 0
          }
          this.handleGetData()
          break
        case 'optimize':
          this.filter = {
            'check': 'loss',
            'cache_key': '',
            'max_roi': 5,
            'min_roi': 3,
            'min_amount': 0,
            'max_amount': 0,
            'rate': 7,
            'timerange': '',
            'order_desc': false,
            'process': false,
            'order_by': 'clicks',
            'min_cost': 0,
            'max_cost': 100000,
            'min_click': 0,
            'max_click': 0,
            'min_display': 0,
            'max_display': 0,
            'min_cpc': 0,
            'max_cpc': 0
          }
          this.handleGetData()
          break
        case 'profitable':
          this.filter = {
            'check': 'loss',
            'cache_key': '',
            'max_roi': 0,
            'min_roi': 5,
            'min_amount': 0,
            'max_amount': 0,
            'rate': 7,
            'timerange': '',
            'order_desc': false,
            'process': false,
            'order_by': 'clicks',
            'min_cost': 0,
            'max_cost': 100000,
            'min_click': 0,
            'max_click': 0,
            'min_display': 0,
            'max_display': 0,
            'min_cpc': 0,
            'max_cpc': 0
          }
          this.handleGetData()
          break
        case 'custome':
          this.filter = {
            'check': 'loss',
            'cache_key': '',
            'max_roi': 0,
            'min_roi': 0,
            'min_amount': 0,
            'max_amount': 0,
            'rate': 7,
            'timerange': '',
            'order_desc': false,
            'process': false,
            'order_by': 'clicks',
            'min_cost': 0,
            'max_cost': 100000,
            'min_click': 0,
            'max_click': 0,
            'min_display': 0,
            'max_display': 0,
            'min_cpc': 0,
            'max_cpc': 0
          }
          this.innerDialogVisible = true
      }
    },
    handleDelete(row) {
      Delete(row.id).then(response => {
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
      }).catch(err => {
        console.log(err)
        this.$notify({
          title: '失败',
          message: err,
          type: 'error',
          duration: 2000
        })
      })
    },
    handleGetData() {
      const _data = Object.assign({}, this.filter)
      _data.pagesize = this.pagesize
      if (this.kwInput) {
        _data['kw'] = this.kwInput
      }
      _data.page = this.page
      this.loading = true
      Get('', qs.stringify(_data))
        .then(response => {
          this.loading = false
          this.data = response.data.data
          this.total = response.data.total
          this.innerDialogVisible = false
        }).catch(err => {
          this.loading = false
          console.log(err)
        })
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        if (index === 2) {
          sums[index] = 'N/A'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          if (index === 4 || index === 7 || index === 8) {
            sums[index] = (sums[index] / this.total).toFixed(2)
          }
          if (index === 5 || index === 6) {
            sums[index] = sums[index].toFixed(1)
            sums[index] += '元'
          }
        } else {
          sums[index] = 'N/A'
        }
      })

      return sums
    },
    handleSelectionChange(val) {
      // this.multipleSelection = []
      // val.forEach(item => {
      //   if (item.product_id) {
      //     this.multipleSelection.push(item.product_id)
      //   }
      // })
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    close() {
      this.$emit('closeWebDialog', false)
    }
  }
}
</script>

<style scoped>
  .app-container >>> table, tr {
    border-color: black;
  }

  .el-header {
    height: 120px;
  }

  .el-header, .el-footer {
    background-color: #f0f0f0;
    color: white;
  }

  .el-container >>> .pointer {
    cursor: pointer;
    color: #409EFF;
  }

  .el-container >>> a:visited {
    color: purple;
  }

  .el-container >>> a:link {
    color: #409EFF;
  }

  .el-container >>> a:active {
    color: red;
  }
</style>
